<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<html lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>权限管理列表</title>
    <jsp:include page="../common/common.jsp"/>
    <style>
        .searchs{
            padding-top: 20px;
        }
        .w-45p{
            width:45%!important;
        }
        .w-10p{
            width: 10%!important;
            text-align: center;
            line-height: 34px;
        }
        .w-50{
            width:60px!important;
        }
        table{
            font-size:small;
        }
        th{
            font-size:small;
        }
    </style>
</head>
<body>

<div id="main">
    <div class="searchs">
        <!--  id="defaultForm"校检   -->
        <form method="post" class="form-horizontal searchsForm">
            <!-- 下面这个div必须要有，插件根据这个进行添加提示 -->
            <div class="col-lg-4 col-md-4 form-group">
                <label class="col-lg-3 col-md-3 control-label">权限名称</label>
                <div class="col-lg-8 col-md-8">
                    <input type="text" class="form-control" id="zhName" name="zhName"/>
                </div>
            </div>
            
            <div class="col-lg-4 col-md-4 form-group">
                <label class="col-lg-3 col-md-3 control-label">权限状态</label>
                <div class="fl w-160">
					<select class="form-control" id="status" name="status">
						<option value="">---请选择---</option>
						<option value="1">启用</option>
						<option value="2">禁用</option>
					</select>
				</div>
            </div>
            
            <div class="form-group">
                <div class="col-lg-3 col-md-3 col-lg-offset-9 col-md-offset-9">
                    <button id="search" type="button" class="btn btn-primary w-50 fr" style="margin-left: 10px; margin-right: 10px;">搜索</button>
                    <input type="reset" class="btn btn-primary w-50 fr btn-reset" value="重置">
                    <button id="returnBeforePage" type="button" onclick="history.back(-1);" class="btn btn-primary fr" style="width:100px;margin-left: 10px; margin-right: 10px;display: none;">返回</button>
                </div>
            </div>
        </form>
    </div>
    <div id="toolbar">
        <a class="waves-effect waves-button" id="toAddPermissionPage" href="javascript:void(0);" ><i class="glyphicon glyphicon-plus"></i>新增子权限</a>
    </div>

    <table id="table"></table>
</div>
<script>
    var $table = $('#table');
    var parentId = "${param.parentId}";
    var permissionType = "${param.permissionType}";
    $(function() {
    	if(parentId != "" && permissionType != null && permissionType != undefined){
    		$("#returnBeforePage").show();
    	}else{
    		parentId = 0;
    	}
    	if(permissionType == null || permissionType == undefined || permissionType == ""){
    		permissionType = 1;
    	}else{
    		permissionType = parseInt(permissionType) + 1;
    	}
    	$("#toAddPermissionPage").attr("href",webroot + "/admin/page/system/permissionAdd?parentId="+parentId+"&permissionType=" + permissionType);
        
    	$(document).on('focus', 'input[type="text"]', function() {
            $(this).parent().find('label').addClass('active');
        }).on('blur', 'input[type="text"]', function() {
            if ($(this).val() == '') {
                $(this).parent().find('label').removeClass('active');
            }
        });
        // bootstrap table初始化
        // api 链接
        // http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
        // 数据格式[json]必须包含：total节点（总记录数），rows节点（分页后数据）
        //即：{“total”:24,”rows”:[…]}
        $table.bootstrapTable({
            //url: webroot+'/static/data/data1.json',
            method: "post",
            url: webroot+'/admin/system/queryListPermissionData?date='+new Date()+"&parentId="+parentId,
            contentType:"application/x-www-form-urlencoded",
            height: getHeight(),
            striped: true,//是否隔行变色
            minimumCountColumns: 2,
            clickToSelect: true,
            //detailView: true,
            //detailFormatter: 'detailFormatter',
            pagination: true,
            paginationLoop: false,
            pageList:[10,20,30,40,50],
            classes: 'table table-hover table-no-bordered',
            // 服务端分页
            sidePagination: 'server',
            //silentSort: false,
            //默认值为 'limit',传给服务端的参数为：limit, offset, search, sort, order Else
            //queryParamsType:'',
            //查询参数（重写参数）,每次调用是会带上这个参数，可自定义  
            //其中 params表示 分页， params.offset, 页码: params.limit 页面大小
            queryParams:function(params) {
                var zhName = $('#zhName').val();
                var status = $('#status').val();
                return {//此处添加查询的分页条件
                    pageNum: params.offset+1==1?1:((params.offset-(params.limit))/10+2),
                    numPerPage: params.limit,
                    zhName:zhName,
                    status:status
                };
            },
            smartDisplay: false,
            idField: 'id',
            sortable: false,// 关闭排序
            escape: true,
            maintainSelected: true,
            toolbar: '#toolbar',
            columns: [
                {title: '编号',  align: 'center',formatter: function (value, row, index) {  
                    return index+1;  
                }},
                {field: 'id', title: 'ID',  align: 'center',visible:false},
                {field: "zhName", title: '权限名称', align: 'center'},
                {field: 'enName', title: '权限标识', align: 'center'},
                {field: 'url', title: '路径', align: 'center',formatter:'urlFormat'},
                {field: 'permission', title: '所需操作权限', align: 'center',formatter:'urlFormat'},
                {field: 'parentId', title: '父编码', align: 'center'},
                {field: 'status', title: '状态', align: 'center',formatter:'permissionStatusFormat'},
                {field: 'permissionType', title: '权限类型', align: 'center',formatter:'permissionTypeFormat'},
                {field: 'remark', title: '备注', align: 'center'},
                {field: 'action', title: '操作', halign: 'center', align: 'center', formatter: 'actionFormatter', events: 'actionEvents', clickToSelect: false}
            ]
        }).on('all.bs.table', function (e, name, args) {
            $('[data-toggle="tooltip"]').tooltip();
            $('[data-toggle="popover"]').popover();
        });
    });


    //条件查询 使用refresh来更新tableb表格
    $('#search').click(function () {
        $table.bootstrapTable('refresh', {url: webroot+'/admin/system/queryListPermissionData?parentId='+parentId});
    });

    //格式化a标签
    function actionFormatter(value, row, index) {
    	if(row.permissionType == 4){
    		 return [
	            '<a class="edit ml10" href="${webroot}/admin/page/system/permissionUpdate?id='+row.id+'&parentId='+row.parentId+'&permissionType='+row.permissionType+'" data-toggle="tooltip" title="编辑"><i class="glyphicon glyphicon-edit"></i></a>　'
	         ].join('');
    	}else{
    		 return [
	            '<a class="like" href="${webroot}/admin/page/system/permissionList?parentId='+row.id+'&permissionType='+row.permissionType+'" data-toggle="tooltip" title="查看下级权限"><i class="glyphicon glyphicon-pencil"></i></a>　',
	            '<a class="edit ml10" href="${webroot}/admin/page/system/permissionUpdate?id='+row.id+'&parentId='+row.parentId+'&permissionType='+row.permissionType+'" data-toggle="tooltip" title="编辑"><i class="glyphicon glyphicon-edit"></i></a>　'
	         ].join('');
    	}
       
    }

    function detailFormatter(index, row) {
        var html = [];
        $.each(row, function (key, value) {
            html.push('<p><b>' + key + ':</b> ' + value + '</p>');
        });
        return html.join('');
    }

</script>
</body>
</html>
